<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #con {
            width: 1200px;
            height: 600px;
            margin: 0 auto;
            background-color: rgb(103, 86, 86);
            position: relative;
        }

        #mid {
            width: 1200px;
            height: 200px;
            margin: 0 auto;
            background-color: rgb(202, 91, 91);
        }

        #mid2 {
            width: 1200px;
            height: 600px;
            margin: 0 auto;
            background-color: rgb(61, 46, 46);
        }


        #box {
            width: 200px;
            height: 200px;
            background-color: rgb(66, 189, 0);
            position: absolute;
            left: 300px;
            top: 300px;
        }
    </style>
    <script src=" https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>
    <script>

    </script>

    <div id="con">

        <div id="box">

        </div>
    </div>

    <div id="mid">

    </div>


    <div id="mid2">

    </div>
    <script>
        // 获取 div 相对页面的位置
        console.log($('#box').offset());//{top: 300, left: 300}
        console.log($('#box').offset().left);//
        console.log($('#box').offset().top);//

        // 获取 div 相对于父元素的偏移量（定位的值）
        console.log($('#box').position());//{top: 300, left: 300}


        console.log($('#mid').offset());//{top: 300, left: 300}



        $('#box').click(function () {

            //页面滚动--滚到 跟 top 一样
            let t = $('#mid').offset().top

            document.documentElement.scrollTop
            // document.documentElement.scrollTo({ top: t - 100, behavior: "smooth" })

            $('html').animate({ scrollTop: t })

        })
    </script>

</body>

</html>